import React, { Component } from 'react';
import {
  WebView,
  Modal,
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Image,
  Dimensions,
  Clipboard,
  ToastAndroid
} from 'react-native';
import pxToDp from './js/common/comm';
import ShareUtil from './js/libs/ShareUtil';

// import * as WeChat from '../node_modules/react-native-wechat/';
export default class App extends Component {
  constructor(props){
    super(props);
    this.state={
      iShow:false,
      url:''
    }
  }
  render() {
    return (
      <View style={{flex:1}}>
        <WebView
          source={{uri:'http://bigzhuan.com/home?type=1'}}
          automaticallyAdjustContentInsets={false}
          scalesPageToFit={true}
          javaScriptEnabled={true}
          ref={'webview'}
          onMessage = {(e)=>{
            this.setState({
              url:e.nativeEvent.data,
              iShow:true
            })
          }}
        />
        <Modal
          onRequestClose={()=>{this.onRequestClose()}}
          visible={this.state.iShow}
          transparent={true}
        >
        <TouchableOpacity style={styles.container} activeOpacity={1}
            onPress={() => this.onRequestClose()}>
            {this.renderDialog()}
        </TouchableOpacity>
        </Modal>
      </View>
    );
  }
  renderDialog() {
    return (
        <View style={styles.modalStyle}>
          <Text style={styles.text}>选择分享方式</Text>
          <View style={styles.box}>
              <TouchableOpacity style={styles.item} onPress={() => this._share_f()}>
                  <Image resizeMode='contain' style={styles.image}
                          source={require('./js/img/share_f.png')}/>
              </TouchableOpacity>
              <TouchableOpacity style={{marginLeft:pxToDp(70),marginRight:pxToDp(68)}} onPress={() => this._share_p()}>
                  <Image resizeMode='contain' style={styles.image}
                          source={require('./js/img/share_p.png')}/>
              </TouchableOpacity>
              <TouchableOpacity style={styles.item} onPress={()=>this._setClipboardContent()}>
                  <Image resizeMode='contain' style={styles.image}
                          source={require('./js/img/share_l.png')}/>
              </TouchableOpacity>
          </View>
        </View>
    )
}
_share_f(){
  ShareUtil.share('比赚运用大数据分析来筛选产品；用AI科技实现多元化资产配置；用智能金融服务为个人资产增值！',
  'https://bigzhuan.com/static/assets/apple-touch-icon-iphone4.png',
  this.state.url,
  '比一比，赚更多！投资理财比赚更专业！',
  2,
  (code,message) =>{
  });
}
_share_p(){
  ShareUtil.share('比赚运用大数据分析来筛选产品；用AI科技实现多元化资产配置；用智能金融服务为个人资产增值！',
  'https://bigzhuan.com/static/assets/apple-touch-icon-iphone4.png',
  this.state.url,
  '比一比，赚更多！投资理财比赚更专业！',
  3,
  (code,message) =>{
  });
}
async _setClipboardContent(){
  Clipboard.setString(this.state.url);
  ToastAndroid.show('链接已复制', ToastAndroid.SHORT, ToastAndroid.TOP); 
}
  showModal(){
    this.setState({
      iShow:true
    })
  }
  onRequestClose(){
    this.setState({
      iShow:false
    })
  }
  onMessage = (e) => {
    // this.shareToFriends()
    this.setState({
      iShow:true,
    })
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent:'flex-end'
  },
  modalStyle: {
    // position: "absolute",
    // top: height - 170,
    // left: 0,
    // width: width,
    height: pxToDp(284),
    flexDirection:'column',
    backgroundColor: '#ffffff',
    justifyContent:'center'
  },
  text: {
      flex: 1,
      fontSize: pxToDp(28),
      margin: pxToDp(30),
      // justifyContent: 'center',
      // alignItems: 'center',
      alignSelf: 'center'
  },
  box:{
    flexDirection: 'row',
    justifyContent:'center',
    marginBottom:pxToDp(50)
  },
  image: {
      width: pxToDp(94),
      height: pxToDp(131),
      // marginBottom: 8
  },
})
